<template>
  <div class="more">
    <ul class="more_ul">
      <li class="more_li" v-for="(subject,index) in subjects" :key="index">
        <a @click="particu(subject.id,subject.original_title)">
          <img class="moreImg" :src="subject.images.large" alt="海报">
          <div class="title_name">
            <h5>{{subject.original_title}}</h5>
            <!--数组长度为5，共5次循环显示5颗星星-->
            <div class="stars">
              <!-- 全黄星星 -->
              <img
                class="stars_img"
                src="/static/images/star_fill_whole.png"
                v-if="subject.rating.average>=index+1"
              >
              <!-- 半黄星星 -->
              <img
                class="stars_img"
                src="/static/images/star_fill_half.png"
                v-if="subject.rating.average>=index && subject.rating.average%10!=0"
              >
              <!-- 全灰星星 -->
              <img class="stars_img" src="/static/images/star_fill_none.png" v-else>
              <span class="stars_sp" v-if="subject.rating.average==0">暂无评分</span>
              <span class="stars_sp" v-else>{{subject.rating.average}}</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {
    ...mapGetters(["subjects"])
  },
  methods: {
    particu(id, title) {
      wx.navigateTo({
        url: "/pages/details/main?id=" + id + "&title=" + title
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
.more {
  width: 100%;
  height: 100%;
}
.more_li {
  float: left;
  width: 25%;
  height: 380rpx;
  padding: 30rpx 4.1% 0rpx 4.1%;
}
.moreImg {
  width: 100%;
  height: 260rpx;
}
/* 影片名称 */
.title_name h5 {
  width: 170rpx;
  font-size: 24rpx;
  color: #000000;
  font-weight: bold;
  margin: 10rpx 0 5rpx 0;
  overflow: hidden; /*内容超出后隐藏*/
  text-overflow: ellipsis; /* 超出内容显示为省略号*/
  white-space: nowrap; /*文本不进行换行*/
}
.stars {
  height: 40rpx;
  display: flex;
  align-items: center;
}
.stars_sp {
  font-size: 20rpx;
  margin-left: 10rpx;
}
.stars_img {
  width: 25rpx !important;
  height: 25rpx !important;
}
</style>